<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body th:fragment="~{shared::omdal}">
    <div id="myModal" class="fixed inset-0 z-50 overflow-auto bg-gray-800 bg-opacity-50 hidden">
        <div class="flex items-center justify-center min-h-screen">
            <div class="bg-white rounded-lg p-8">
                <h2 id="modelTitle" class="text-xl font-bold mb-4">Modal Title</h2>
                <p id="modalContent" class="text-gray-700"></p>
                <button onclick="closeModal()" id="closeModal"
                        class="mt-4 px-4 py-2 bg-red-400 text-white rounded hover:bg-red-500">Close
                </button>
            </div>
        </div>
    </div>
    <script>
        function showModal(title, content, status='error') {
            $('#modalContent').text(content);
            $('#modelTitle').text(title)
            $('#myModal').removeClass('hidden');
            $('#closeModal').removeClass('bg-red-400 hover:bg-red-500 bg-green-400 hover:bg-green-500 bg-green-400 hover:bg-green-500')
            if(status == 'error') {
                $('#closeModal').addClass('bg-red-400 hover:bg-red-500')
            }else{
                $('#closeModal').addClass('bg-green-400 hover:bg-green-500')
            }
        }
        function closeModal() {
            $('#myModal').addClass('hidden');
        }
    </script>
</body>
</html>